<template>
  <div>
     <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
       <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getList"
       
      >
  
  <div class="banner" v-for="item in b"  @click="$router.push({path:'/article',query:{article_id:item._id,title:item.title}})">
      <span>{{ item.title }}</span>
      <van-grid :border="false" :column-num="1">
        <van-grid-item v-for="item2 in item.imageSrc">
          <van-image :src="item2" />
        </van-grid-item>
      </van-grid>
      <p>{{ item.author }} 评论{{ item.time | moment }}</p>
    </div>
        </van-list>

      </van-pull-refresh>
  </div>
</template>

<script>
import { List ,  PullRefresh, Grid, GridItem,Image as VanImage } from "vant";
import {search} from '@/api/api'
export default {
    name:'searchList',
    data(){
        return{
            
            loading:false,
            finished:false  ,  // 是否全部加载完毕了
            skip:0,
            limit:20,
            isRefresh:false,  //是否正在刷新
            b:[],
            key_word:''
        }
    },
    components:{
        [List.name]:List,
        [PullRefresh.name]:PullRefresh,
        [Grid.name]: Grid,
        [GridItem.name]: GridItem,
        [VanImage.name]: VanImage,
    },
    created(){
        this.key_word = this.$route.query.key_word
    },
    methods:{
        getList(flag){
           let {key_word,skip,limit} = this;
            search({
                key_word,skip,limit
            }).then(res=>{
                console.log(res)
                if(res.code==0){
                    if(flag){
                        this.list = res.data
                        this.isRefresh = false
                    }else{
                        this.b.push(...res.data);
                    }
                    
                    let len = this.b.length;

                    if(len>=res.count){
                        this.finished = true
                    }else{
                        this.loading = false;
                        this.skip = len
                    }
                }
            })
        },
        onRefresh(){
            this.skip = 0;
            this.finished = false;
            this.getList(true)
        }
    }
}
</script>

<style>

</style>